import React from 'react';
import { useNavigate } from 'react-router-dom';
import { Button, Checkbox, Form, Input, message } from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons'
import '../assets/css/login.scss';

import axios from '../utils/axios';

export default function Loign() {
    const redirect = useNavigate();
    // 表单校验通过处理函数
    const onFinish = async (e) => {
        const { username, password } = e;
        const res = await axios.post('/login', { username, password });
        if (res.code === 200) {
            localStorage.setItem('adminLoginInfo', JSON.stringify(res.data));
            // 成功提示
            message.success(res.msg);
            // 自动跳转到登录到管理中心
            redirect('/home', { replace: true });
            return;
        }
        // 失败提示
        message.error(res.msg);
    }
    // 表单校验不通过处理函数
    const onFinishFailed = (err) => {
        console.log(err, 'err');
    }
    return (
        <div className='login-container'>
            <div className="login-wrap">
                <h1 className='login-title'>管理员登录</h1>
                <Form
                    name="basic"
                    style={{
                        maxWidth: 600,
                    }}
                    initialValues={{
                        remember: true,
                    }}
                    onFinish={onFinish}
                    onFinishFailed={onFinishFailed}
                    autoComplete="off"
                >
                    <Form.Item
                        name="username"
                        rules={[
                            {
                                required: true,
                                message: '请输入用户名!',
                            },
                        ]}
                    >
                        <Input size='large' prefix={<UserOutlined className="site-form-item-icon" />} />
                    </Form.Item>

                    <Form.Item
                        name="password"
                        rules={[
                            {
                                required: true,
                                message: '请输入密码!',
                            },
                        ]}
                    >
                        <Input.Password size='large' prefix={<LockOutlined className="site-form-item-icon" />} />
                    </Form.Item>

                    <Form.Item
                        name="remember"
                        valuePropName="checked"

                    >
                        <Checkbox>记住我</Checkbox>
                    </Form.Item>

                    <Form.Item>
                        <Button type="primary" htmlType="submit" block size="large">
                            立即登录
                        </Button>
                    </Form.Item>
                </Form>
            </div>
        </div>
    )
}
